<template>
  <div class="banner">
    <el-carousel height="702px">
      <el-carousel-item
        indicator-position="outside"
        v-for="item in images"
        :key="item.id"
      >
        <div
          class="image"
          :style="{ backgroundImage: `url(${item.cover})` }"
        ></div>
      </el-carousel-item>
    </el-carousel>
    <div class="mask_box" ref="mask_box">
      <div class="tips" ref="tips">
        <div class="content">
          <div class="title">
            <i class="el-icon-date"></i>
            <span class="text">开放时间</span>
          </div>
          <div class="opening_hours">
            <div
              class="opening_hours_item"
              v-for="item in openTime"
              :key="item.id"
            >
              <div class="season">{{ formatTitle(item.title) }}：</div>
              <div class="time" v-html="item.value"></div>
              <!-- <div class="am time">上午：{{ item.am }}</div>
              <div class="pm time">下午：{{ item.pm }}</div> -->
            </div>
          </div>
          <div class="archive_info">
            <div class="archive_info_box">
              <div class="tel archive_info_item">
                <div class="info_title">查档电话：</div>
                <div class="info_content">{{ queryTel }}</div>
              </div>
              <div class="room archive_info_item">
                <div class="info_title">查档房间号码：</div>
                <div class="info_content">{{ queryAddress }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    openTime: {
      type: Array,
      default: function () {
        return [
          {
            id: 1,
            title: "冬季",
            value: "<p>上午：08:00-12:00</p>\n<p>下午：14:00-18:00</p>",
          },
          {
            id: 2,
            title: "夏季",
            value: "<p>上午：08:00-12:00</p>\n<p>下午：14:30-18:30</p>",
          },
        ];
      },
    },
    queryAddress: {
      type: String,
      default: "029-1234567",
    },
    queryTel: {
      type: String,
      default: "103",
    },
    bannerData: {
      type: Array,
    },
  },
  data() {
    return {
      images: [],
      calculatedHeight: null,
      svgs: [
        {
          color: "#f5f9f7",
          width: 1920,
          height: 295,
          paths: [
            " M 0.00 30.00  L 0.00 295.00 L 1920.00 295.00 L 1920.00 291.00 C 1863.94 276.28 1813.94 260.88 1756.99 247.01 C 1700.05 233.14 1646.55 219.93 1586.93 210.07 C 1527.30 200.22 1463.14 191.34 1400.00 189.00 C 1336.86 186.66 1257.48 188.46 1194.00 188.00 C 1130.52 187.54 1060.13 184.62 1000.33 175.67 C 940.53 166.72 890.52 151.32 835.78 133.22 C 781.03 115.13 736.27 97.64 682.93 78.07 C 629.58 58.51 582.70 41.92 526.98 27.02 C 471.25 12.13 405.14 2.78 346.00 0.00 L 256.00 0.00 C 169.75 4.45 84.48 16.97 0.00 30.00 Z",
          ],
          class: "mask",
          pDom: "mask_box",
        },
        {
          color: "#fbf5f3",
          width: 430,
          height: 180,
          paths: [
            "M 423.00 174.00 C 422.96 151.43 417.01 125.28 406.92 106.08 C 396.84 86.88 387.26 73.12 370.23 58.77 C 353.20 44.42 337.93 36.48 316.07 29.93 C 294.21 23.37 264.97 22.96 241.00 21.00 C 217.04 19.04 188.06 16.32 164.00 15.00 C 139.94 13.68 109.05 9.01 86.01 8.99 C 62.97 8.97 32.68 -3.63 15.75 13.75 C -1.18 31.14 7.05 65.58 9.22 86.78 C 11.39 107.98 23.60 125.68 38.75 141.25 C 53.90 156.81 69.13 166.36 91.98 171.02 C 114.82 175.69 147.09 173.75 173.00 174.00 C 198.91 174.25 229.06 173.88 256.00 174.00 C 282.94 174.12 312.66 173.94 340.00 174.00 C 367.34 174.06 395.58 173.95 423.00 174.00 Z",
          ],
          class: "mask",
          svgClass: "glow",
          pDom: "tips",
        },
      ],
    };
  },
  watch: {
    bannerData(newVal) {
      this.images = newVal;
    },
  },
  created() {
    // this.randomPic();
  },
  mounted() {
    this.svgs.forEach((item) => {
      const svgContent = this.$createSvg(item);
      const mask = document.createElement("div");
      mask.className = item.class;
      mask.style.position = "absolute";
      mask.style.top = "0";
      mask.style.left = "0";
      mask.style.right = "0";
      mask.style.bottom = "0";
      // mask.style.zIndex = "1";
      mask.innerHTML = svgContent;
      this.$refs[item.pDom].appendChild(mask);
    });
  },
  methods: {
    formatTitle(title) {
      if (title.includes("夏季")) {
        return "夏季";
      } else if (title.includes("冬季")) {
        return "冬季";
      }
    },
    randomPic() {
      // 随机生成3-6张图片
      let picSum = Math.floor(Math.random() * 4) + 3;
      for (let i = 0; i < picSum; i++) {
        this.images.push({
          id: i + 1,
          src: `https://picsum.photos/1920/780?${i}`,
        });
      }
    },
    calculateHeight() {
      const viewportWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
      const originalAspectRatio = 1920 / 295;
      this.calculatedHeight = viewportWidth / originalAspectRatio;
    },
  },
};
</script>

<style lang="scss" scoped>
.banner {
  position: relative;
  height: 702px;
  .image {
    width: 100%;
    height: 100%;
    background-size: cover;
  }
  .mask_box {
    width: 100%;
    height: 295px;
    position: absolute;
    overflow-x: clip;
    left: 0;
    bottom: 0;
    z-index: 2;
    .tips {
      line-height: 28px;
      position: absolute;
      left: 220px;
      top: 50%;
      transform: translateY(-50%);
      width: 430px;
      height: 180px;
      z-index: 2;
      ::v-deep .glow {
        filter: drop-shadow(0 0 4px #666);
      }
      .content {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .title {
          padding: 0 20px;
          font-size: 16px;
          font-weight: bold;
          color: #c34f3d;
          i {
            font-weight: bold;
            margin-right: 5px;
          }
        }
        .opening_hours {
          width: 100%;
          padding: 0 50px;
          display: flex;
          justify-content: space-around;
          .opening_hours_item {
            flex: 1;
            .season {
              font-size: 14px;
              font-weight: bold;
            }
            .time {
              font-size: 12px;
            }
          }
        }
        .archive_info {
          padding-right: 50px;
          width: 100%;
          display: grid;
          justify-content: end;
          .archive_info_box {
            display: flex;
            .archive_info_item {
              display: flex;
              margin: 0 10px;
              font-size: 12px;
              .info_title {
                font-size: 14px;
                font-weight: bold;
              }
            }
          }
        }
      }
    }
  }
}
</style>
